/**
 * DOM操作相关的工具函数
 */

import { ensureUnit } from "../strings";

/**
 * 对齐一组DOM元素的宽度（将所有元素设置为最大宽度）
 * @param {HTMLElement[]} elements 要对齐的DOM元素数组
 * @returns 返回最大宽度值（像素）
 */
export function alignElements(elements: HTMLElement[]): Promise<number> {
    return new Promise((resolve) => {
        // 强制下一帧计算，确保DOM已更新
        requestAnimationFrame(() => {
            // 计算所有元素的最大宽度
            let maxWidth = 0;

            elements.forEach(el => {
                if (el) {
                    const currentWidth = el.offsetWidth;
                    maxWidth = Math.max(maxWidth, currentWidth);
                }
            });

            // 为所有元素设置统一的最大宽度
            elements.forEach(el => {
                if (el) {
                    el.style.width = `${maxWidth}px`;
                    // 确保元素内容不会换行
                    el.style.whiteSpace = 'nowrap';
                }
            });

            resolve(maxWidth);
        });
    });
};

/**
 * 重置DOM元素的宽度到各自原始设置
 * @param {Map<HTMLElement, string | number>} elementWidths 存储每个元素原始宽度的Map
 */
export function resetElementWidths(
    elementWidths: Map<HTMLElement, string | number>,
): void {
    requestAnimationFrame(() => {
        // 直接从elementWidths中获取所有元素键
        elementWidths.forEach((labelWidth, el) => {
            if (el) {
                // 使用Map中存储的原始宽度
                el.style.width = labelWidth ? ensureUnit(labelWidth, 'px') : 'auto';
                el.style.whiteSpace = 'normal';
            }
        });
    });
};

/**
 * 计算元素的实际内容宽度加上内边距
 * @param element 要计算宽度的DOM元素
 * @returns 计算后的实际宽度（像素）
 */
export function width(element: HTMLElement): number {
    if (!element) return 0;

    // 获取计算样式
    const computedStyle = window.getComputedStyle(element);

    // 获取元素的内容宽度
    const contentWidth = element.scrollWidth;

    // 考虑内边距
    const paddingLeft = parseFloat(computedStyle.paddingLeft) || 0;
    const paddingRight = parseFloat(computedStyle.paddingRight) || 0;

    // 计算最终宽度
    return contentWidth + paddingLeft + paddingRight;
};